import React, { useState, useEffect } from "react";
import Add from "../components/users/Add";
import Update from "../components/users/Update";
import Search from "../components/users/Search";
import List from "../components/users/List";
import { getAll } from "../services/user";
import { getId, deleteUser } from "../services/user";
import { useDispatch, useSelector } from "react-redux";
import { setUpdateVisible, setUserObj } from "../store/slices/userSlice";
import { Col, Row } from 'antd';

export default function Student() {
  let data;
  let [users, setUsers] = useState([]);
  let [searchObj, setSearchObj] = useState("");
  let [pagination, setPagination] = useState({
    showSizeChanger: true,
    showQuickJumper: true,
    position: ["bottomCenter"],
    showTotal: (total) => `总共 ${total} 条`,
    pageSizeOptions: [5, 10, 15, 20],
  });
  const show = async (params) => {
    console.log(params);
    if (params) {
      params = { ...searchObj, ...params };
      setSearchObj(params);
    } else {
      params = searchObj;
    }
    let data = await getAll(params);
    console.log(data.data);
    setUsers(data.data.rows);


    setPagination({
      ...pagination,
      total: data.data.total,
      pageSize: data.data.pageSize,
      current:parseInt(data.data.current),
    });
  };
  const dispatch = useDispatch();
  const click = async (record) => {
    dispatch(setUpdateVisible(true));
    let data = await getId({ id: record._id });
    dispatch(setUserObj(data.data))
  };
  useEffect(() => {
    show();
  }, [users.length]);

  const del = async (e) => {
    console.log(e.target.id);
    let data = await deleteUser({ id: e.target.id });
    console.log(data);
    show();
  };
  return (
    <div>
      <Row>
        <Col span={2} ><Add show={show}></Add></Col>
        <Col span={12}><Search show={show}></Search></Col>
      </Row>


      <Update
        show={show}></Update>

      <List
        show={show}
        users={users}
        pagination={pagination}
        click={click}
        del={del}
      ></List>
    </div>
  );
}
